<template>
	<view>
		<view class="header">
			<view class="nav">
				<view class="box" :class="{'cur':isNav==1}" @click="changeNav(1)">
					<view class="text">未使用</view>
					<view class="icon"></view>
				</view>
				<view class="box" :class="{'cur':isNav==2}" @click="changeNav(2)">
					<view class="text">历史优惠券</view>
					<view class="icon"></view>
				</view>
				<!-- <view class="box" :class="{'cur':isNav==3}" @click="changeNav(3)">
					<view class="text">已过期</view>
					<view class="icon"></view>
				</view> -->
			   <!--  样式也可这样写-->
				<!-- <view class="box" :class="isNav==3?'cur':''" @click="changeNav(3)">
					<view class="text">已过期</view>
					<view class="icon"></view>
				</view> -->
			</view>
		</view>
		<view  class="couponList">
			<!-- color：主题色 couponList：优惠券数组  @itemClick：条目点击-->
			<!-- 未使用优惠券 -->
			<cc-couponList v-if="isNav == 1 && flag == true" :colors="colors" :couponList="unusedCouponList" @itemClick="jumpNext"></cc-couponList>
			<!-- 历史优惠券 -->
			<cc-couponList v-if="isNav == 2 && flag == true" :colors="colors" :couponList="pastCouponList" @itemClick="jumpNext"></cc-couponList>
		</view>
	</view>
</template>
<script>
	import {getUnusedCouponList, getPastCouponList} from '@/api/coupon.js'
	export default {
		data() {
			return {
				flag: false,
				colors: '#e54d42',
				isNav: 1,                 //1未使用 2已使用 3已失效
				unusedCouponList: [],
				pastCouponList: []
			}
		},
		onLoad() {
			this.getUnusedCoupons();
			this.flag = true;
		},
		methods: {
			getUnusedCoupons() {
				// 调用接口
				getUnusedCouponList((res) => this.unusedCouponList = res.data.data)
			},
			getPastCoupons() {
				getPastCouponList(
					(res) => {
						this.pastCouponList = res.data.data
					}
				)
			},
			// tab切换
			changeNav(index){
				if (this.isNav == index)
					return;
				else {
					this.isNav= index;            //传后端类型直接传this.isNav
					if(index == 1) {
						this.getUnusedCoupons()
					} else {
						this.getPastCoupons();
					}
				}
			},
			jumpNext(item) {
				// 跳到店铺分区
			    uni.showModal({
			        title: '点击优惠券条目',
			        content: '点击优惠券条目 = ' + JSON.stringify(item)
			    })
			}
		}
	}
</script>
<style>
	.couponList {
		margin-top: 100upx;
	}
	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		top: var(--window-top); /* css变量 */
		left: 0rpx;
		z-index: 990;
		font-size: 24rpx;
		background-color: #F84B3C;
		box-shadow: 0 2rpx 10rpx 5rpx rgba(225, 225, 235, 0.5);
	}
	.header .nav{
		width: 750rpx;
		display: flex;
		justify-content: space-around;
		color: white;
	}
	.header .nav .box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.header .nav .box .text {
		height: 78rpx;
		line-height: 78rpx;
		font-size: 28rpx;
	}
	
	.header .nav .box .icon {
		width: 68rpx;
		height: 4rpx;
		background-color: white;
		justify-self: flex-end;
		justify-self: end;
		display: none;
		border-radius: 4px 4px 0px 0px;
	}
	
	.header .nav .box.cur .text {
		font-weight: bold;
	}
	
	.header .nav .box.cur .icon {
		display: block;
	}
</style>
